<!DOCTYPE html>
<html>
<head>
	<title>VideoContext</title>
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css">
	.header {
	    font-family: Helvetica, Arial, sans-serif;
	    max-width: 768px;
	    margin: 0 auto;
	    padding: 1em;
	    text-align: center;
	    border-bottom: 1px solid #eee;
	    background: #fff;
	    letter-spacing: 0.05em;
		color: #565d64;
	}
    .header h1 {
        font-size: 300%;
        font-weight: 100;
        margin: 0;
    }
	.header h2 {
	    font-size: 125%;
	    font-weight: 100;
	    line-height: 1.5;
	    margin: 0;
	    color: #666;
	    letter-spacing: -0.02em;
	}
	.examples {
		text-align: center;
	    border-bottom: 1px solid #eee;
	}
	.entry {
		text-align: center;
		color: #565d64;
	    border-bottom: 1px solid #eee;
	}
	.entry a {
		color: #565d64;
		text-decoration: none;
	}
	.entry h2 {
		text-transform: uppercase;	

	}
    </style>
</head>
<body>
	<div class="pure-g">
    	<div class="pure-u-1-3"></div>
    	<div class="pure-u-1-3">
    		<div class="header">
	    		<h1>VideoContext</h1>
	    		<p>An experimental video composition and rendering library for the browser.</p>
	    		<p>By BBC Research and Development</p>
    		</div>
    		<div class="pure-menu examples">
			    <span class="pure-menu-heading"><h2>Examples</h2></span>
			    <ul class="pure-menu-list">
			        <li class="pure-menu-item"><a href="./examples/filters.html" class="pure-menu-link">Filters</a></li>
			        <li class="pure-menu-item"><a href="./examples/transitions.html" class="pure-menu-link">Transitions</a></li>
                    <li class="pure-menu-item"><a href="./examples/aframe.html" class="pure-menu-link">A-Frame and 360 video</a></li>
			        <li class="pure-menu-item"><a href="./examples/codeplayground/index.html" class="pure-menu-link">Code Playground</a></li>
			        <!--<li class="pure-menu-item"><a href="./examples/chromakey.html" class="pure-menu-link">ChromaKey</a></li>
			        <li class="pure-menu-item"><a href="./examples/dynamicvideosequencing.html" class="pure-menu-link">Dynamic Video Sequencing</a></li>-->
			    </ul>
			</div>

    		<div class="pure-menu examples">
			    <span class="pure-menu-heading"><h2>Documentation</h2></span>
			    <ul class="pure-menu-list">
			        <li class="pure-menu-item"><a href="https://github.com/bbc/VideoContext/blob/master/README.md" class="pure-menu-link">Readme</a></li>
			        <li class="pure-menu-item"><a href="./api" class="pure-menu-link">API</a></li>
			    </ul>
			</div>
    		<div class="entry">
	    		<h2> <a href="https://github.com/bbc/videocontext">Source Code</a></h2>
    		</div>
    	</div>
    	<div class="pure-u-1-3"></div>
	</div>
</body>
</html>